<template>
	<view>
		<!-- 列表 -->
		<view @click="$emit('click')" class="p-3 flex align-center border-bottom border-light-secondary" hover-class="bg-liht">
			<text :class="iconClass" class="iconfont  " style="font-size: 60rpx;"></text>
			<view class="flex flex-column ml-3" style="line-height: 1.2;">
				<text style="width: 70vw;" class="font-md text-ellipsis">{{item.name}}</text>
				<text class="font-sm text-muted">{{item.created_time | formatTime}}</text>
			</view>
			<view  class="ml-auto ">
				<slot></slot>
				<view v-if="showRight" @click.stop="select"  class="flex align-center justify-center" style="width: 70rpx;height: 70rpx;">
					<text v-if="item.checked" style="font-size: 40rpx;" class="iconfont icon-xuanze-yixuan text-primary"></text>
					<text v-else style="width: 25rpx;height: 25rpx;" class="rounded-circle border"></text>
				</view>
			</view>
			
			
		</view>
		<slot name="bottom"></slot>
	</view>
</template>

<script>
	import $T from '@/common/time.js';
	const icons={
		dir:{
			icon:"icon-file-b-2",
			color:"text-warning"
		},
		image:{
			icon:"icon-file-b-6",
			color:"text-success"
		},
		video:{
			icon:"icon-file-b-9",
			color:"text-primary"
		},
		text:{
			icon:"icon-file-s-7",
			color:"text-info"
		},
		none:{
			icon:"icon-file-b-8",
			color:"text-muted"
		}
	}
	export default {
		data() {
			return {
				
			};
		},
		filters:{
			formatTime(val){
				if(!val){
					return ''
				}
				if(typeof val ==='string'){
					return val
				}
				return $T.gettime(val)
				
			}
		},
		computed:{
			iconClass(){
				let item=icons[this.item.type]
				return `${item.icon} ${item.color}`
			}
		},
		props:{
			item:Object,
			index:[Number,String],
			showRight:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			select(){
				this.$emit('select',{
					index:this.index,
					value:!this.item.checked
				})
			}
		}
	}
</script>

<style>

</style>
